<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<body>
		Filter Example
		<script type="text/javascript">
    		function filter_projects(){
    			var filter_str = document.getElementById("filter_text").value;

				// filter special character.
				filter_str = filter_str.replace(/[\\\[\]&^$()<>{}+]/ig,'');
				var filter_str = filter_str.replace(/[?]/ig,'.');
				filter_str = filter_str.replace(/\*/ig,'.+');
				filter_str = filter_str.replace(/\-/ig,'\\-');
				var rex = "^"+filter_str;

				document.getElementById("reg_text").value=rex;// +'   AFTERIS   '+ filter_str;

				var obj = document.getElementById("project_list");
				var objs = obj.getElementsByTagName("li");
				for(var i=0;i<objs.length;i++){
					var re = new RegExp(rex);
					if(objs[i].id.match(re)) {
						objs[i].style.display='';
					}else{
						objs[i].style.display='none';
					}
				}
			}
    	</script>
		<input type="text" id="filter_text" name="filter_text" onkeyup="filter_projects()" ><BR>
		<span> the RegExp is</span>
		 <input type="text" id="reg_text" name="reg_text" readonly="readonly" >
		<ul id="project_list">
			<li id="apple">
				1 apple
			</li>
			<li id="我的苹果banana">
				2 我的苹果banana
			</li>
			<li id="noise">
				2 noise( 测试干扰我的苹果)
			</li>
			<li id="我的香蕉">
				3 我的香蕉
			</li>
			<li id="我的玛雅我的">
				4 我的玛雅我的
			</li>
		</ul>
		<br>
			<li id="noize">
				noise(我是干扰)
			</li>
	</body>
</html>
